function Enlarge(select) {
 
    this.ele = document.querySelector(select)

    this.show = this.ele.querySelector('.show')
  

    this.mask = this.ele.querySelector('.mask')
  

    this.enlarge = this.ele.querySelector('.enlarge')
  
    
    this.show_width = this.show.offsetWidth
    this.show_height = this.show.offsetHeight
  
    
    this.enlarge_width = parseInt(window.getComputedStyle(this.enlarge).width)
    this.enlarge_height = parseInt(window.getComputedStyle(this.enlarge).height)
  
 
    this.bg_width = parseInt(window.getComputedStyle(this.enlarge).backgroundSize.split(' ')[0])
    this.bg_height = parseInt(window.getComputedStyle(this.enlarge).backgroundSize.split(' ')[1])
  
 
    this.init()
  }
  
 
  Enlarge.prototype.init = function () {

    this.setScale()
    this.overOut()
 
    this.move()
  }
  

  Enlarge.prototype.setScale = function () {
  
    
    this.mask_width = this.enlarge_width * this.show_width / this.bg_width
    this.mask_height = this.enlarge_height * this.show_height / this.bg_height
  
    this.mask.style.width = this.mask_width + 'px'
    this.mask.style.height = this.mask_height + 'px'
  
  }
  
 
  Enlarge.prototype.overOut = function () {

    this.show.addEventListener('mouseenter', () => {
      this.mask.style.display = 'block'
      this.enlarge.style.display = 'block'
    })
  

    this.show.addEventListener('mouseleave', () => {
      this.mask.style.display = 'none'
      this.enlarge.style.display = 'none'
    })
  }
  
  
  Enlarge.prototype.move = function () {
  
    // 1. 给 this.show 绑定鼠标移动事件
    this.show.addEventListener('mousemove', e => {
      // 处理事件对象兼容
      e = e || window.event
  
      // 2. 获取光标的坐标点
      // 方案1:
      // let x = e.pageX - this.ele.offsetLeft - this.ele.clientLeft - this.mask_width / 2
      // let y = e.pageY - this.ele.offsetTop - this.ele.clientTop - this.mask_width / 2
      // 方案2:
      let x = e.offsetX - this.mask_width / 2
      let y = e.offsetY - this.mask_height / 2
  
      // 3. 边界值判断
      if (x <= 0) x = 0
      if (y <= 0) y = 0
      if (x >= this.show_width - this.mask_width) x = this.show_width - this.mask_width
      if (y >= this.show_height - this.mask_height) y = this.show_height - this.mask_height
  
      // 4. 给 mask 的 left 和 top 进行赋值
      this.mask.style.left = x + 'px'
      this.mask.style.top = y + 'px'
  
      // 5. 让背景图联动
      // 计算出数字
      // 比例: 背景图的尺寸 / 图片盒子的尺寸(show盒子的尺寸) * mask 盒子移动的距离
      const bg_x = this.bg_width / this.show_width * x
      const bg_y = this.bg_height / this.show_height * y
  
      // 给 enlarge 盒子的 backgroundPosition 设置值
      this.enlarge.style.backgroundPosition = `-${ bg_x }px -${ bg_y }px`
    })
  }
  